<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ZUI，一个简单吸引人的前端框架。">
  <meta name="author" content="Zentao">

  <title>ZUI - 开源HTML5跨屏框架</title>

  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <script src="../../assets/jquery.js"></script>
  <script src="../../dist/js/zui.min.js"></script>


  <script>
  $(function ()
  {
      $('.new-comment-text').focus(function ()
      {
        $(this).closest('.form').find('.comment-user').slideDown();
      });
  });
  </script>

  <script src="../assets/js/example.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ZUI</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="alerts.html">alerts</a></li>
            <li><a href="article.html">article</a></li>
            <li><a href="breadcrumb.html">breadcrumb</a></li>
            <li><a href="button-groups.html">button-groups</a></li>
            <li><a href="buttons.html">buttons</a></li>
            <li><a href="cards.html">cards</a></li>
            <li><a href="carousel.html">carousel</a></li>
            <li><a href="chosen.html">chosen</a></li>
            <li><a href="collapse.html">collapse</a></li>
            <li><a href="colorset.html">colorset</a></li>
            <li><a href="comment.html">comment</a></li>
            <li><a href="dropdowns.html">dropdowns</a></li>
            <li><a href="forms.html">forms</a></li>
            <li><a href="grid.html">grid</a></li>
            <li><a href="icons.html">icons</a></li>
            <li><a href="input-groups.html">input-groups</a></li>
            <li><a href="kindeditor.html">kindeditor</a></li>
            <li><a href="labels.html">labels</a></li>
            <li><a href="lightbox.html">Lightbox</a></li>
            <li><a href="list-group.html">list-group</a></li>
            <li><a href="list.html">list</a></li>
            <li><a href="modals.html">modals</a></li>
            <li><a href="navbars.html">navbars</a></li>
            <li><a href="navs.html">navs</a></li>
            <li><a href="pager.html">pager</a></li>
            <li><a href="panels.html">panels</a></li>
            <li><a href="popovers.html">popovers</a></li>
            <li><a href="progress.html">progress</a></li>
            <li><a href="tables.html">tables</a></li>
            <li><a href="tabs.html">tabs</a></li>
            <li><a href="textbox.html">textbox</a></li>
            <li><a href="tooltip.html">tooltip</a></li>
            <li><a href="type.html">type</a></li>
          </ul>
        </li>
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
      </ul>
    </div>
  </nav>
  <article class="article-small">
    <section id="buttons" class="page-section">
      <h1 class="header-dividing">评论视图</h1>
      <h2>类型</h2>
      <h3>一般情况</h3>
      <div contenteditable="false" spellcheck="false" class="segment">
        <div class="comments">
          <header>
            <div class="pull-right"><a href="#commentReplyForm" class="btn btn-info"><i class="icon-comment-alt"></i> 发表评论</a></div>
            <h3><i class="icon-comments icon-border-circle"></i> 26 comments</h3>
            <div class="alert alert-info text-center">
              <a href="alert-link">3 条新的评论</a>
            </div>
          </header>
          <section class="comments-list">
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted" title="2013-11-08 15:52:32">2 hours ago</span> &nbsp;<strong>#5</strong></div>
                <span class="author">
                  <a href="#"><strong>Catouse</strong></a>
                  <span class="text-muted"> replied to </span>
                  <a href="#">Zhang Li</a>
                </span>

                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, illo eaque a iure in quidem officiis numquam ducimus odio non. Architecto, repellendus optio maxime quae sed molestiae ipsa animi tenetur!
                </div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">2 hours ago</span> &nbsp;<strong>#4</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, illo eaque a iure in quidem officiis numquam ducimus odio non. Architecto, repellendus optio maxime quae sed molestiae ipsa animi tenetur!
                </div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">1 days ago</span> &nbsp;<strong>#2</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">2 months ago</span> &nbsp;<strong>#1</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
          </section>
          <footer>
            <div class="reply-form" id="commentReplyForm">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="form">
                <form role="form">
                  <div class="form-group">
                    <textarea class="form-control new-comment-text" rows="2" placeholder="write a comment..."></textarea>
                  </div>
                  <div class="form-group comment-user" style="display:none">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="pull-right">或者</span>
                        <a href="#">登录</a> &nbsp;<a href="##">注册</a>
                      </div>
                      <div class="col-md-7">
                        <div class="form-group">
                          <input type="text" class="form-control" id="nameInputEmail1" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                      </div>
                      <div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </footer>
        </div>
      </div>
      <h3>回复缩进</h3>
      <div contenteditable="true" spellcheck="false" class="segment">
        <div class="comments">
          <header>
            <div class="pull-right"><a href="#commentReplyForm" class="btn btn-info"><i class="icon-comment-alt"></i> 发表评论</a></div>
            <h3><i class="icon-comments icon-border-circle"></i> 26 comments</h3>
          </header>
          <div class="comments-list">
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                <span class="author">
                  <a href="#"><strong>Catouse</strong></a>
                  <span class="text-muted"> replied to </span>
                  <a href="#">Zhang Li</a>
                </span>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
              <div class="comments-list">
                <div class="comment">
                  <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                  <div class="comments-list">
                    <div class="comment">
                      <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                      <div class="content">
                        <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                        <span class="author">
                          <a href="#"><strong>Catouse</strong></a>
                          <span class="text-muted"> replied to </span>
                          <a href="#">Zhang Li</a>
                        </span>
                        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                        <div class="actions">
                          <a href="##">reply</a>
                          <a href="##">edit</a>
                          <a href="##">delete</a>
                        </div>
                      </div>
                      <div class="comments-list">
                        <div class="comment">
                          <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                          <div class="content">
                            <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                            <span class="author">
                              <a href="#"><strong>Catouse</strong></a>
                              <span class="text-muted"> replied to </span>
                              <a href="#">Zhang Li</a>
                            </span>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                            <div class="actions">
                              <a href="##">reply</a>
                              <a href="##">edit</a>
                              <a href="##">delete</a>
                            </div>
                          </div>
                        </div>
                        <div class="comment">
                          <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                          <div class="content">
                            <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                            <span class="author">
                              <a href="#"><strong>Catouse</strong></a>
                              <span class="text-muted"> replied to </span>
                              <a href="#">Zhang Li</a>
                            </span>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                            <div class="actions">
                              <a href="##">reply</a>
                              <a href="##">edit</a>
                              <a href="##">delete</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="comment">
                      <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                      <div class="content">
                        <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                        <span class="author">
                          <a href="#"><strong>Catouse</strong></a>
                          <span class="text-muted"> replied to </span>
                          <a href="#">Zhang Li</a>
                        </span>
                        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                        <div class="actions">
                          <a href="##">reply</a>
                          <a href="##">edit</a>
                          <a href="##">delete</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">1 days ago</span> &nbsp;<strong>#2</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
              <div class="comments-list">
                <div class="comment">
                  <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                </div>
                <div class="comment">
                  <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">2 months ago</span> &nbsp;<strong>#1</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
          </div>
          <footer>
            <div class="reply-form" id="commentReplyForm">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="form">
                <form role="form">
                  <div class="form-group">
                    <textarea class="form-control new-comment-text" rows="2" placeholder="write a comment..."></textarea>
                  </div>
                  <div class="form-group comment-user" style="display:none">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="pull-right">或者</span>
                        <a href="#">登录</a> &nbsp;<a href="##">注册</a>
                      </div>
                      <div class="col-md-7">
                        <div class="form-group">
                          <input type="text" class="form-control" id="nameInputEmail1" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                      </div>
                      <div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </footer>
        </div>
      </div>
      <h3>没有用户头像</h3>
      <p>直接删掉头像部分即可完美适应</p>
      <div contenteditable="true" spellcheck="false" class="segment">
        <div class="comments">
          <header>
            <div class="pull-right"><a href="#commentReplyForm" class="btn btn-info"><i class="icon-comment-alt"></i> 发表评论</a></div>
            <h3><i class="icon-comments icon-border-circle"></i> 26 comments</h3>
          </header>
          <div class="comments-list">
            <div class="comment">
              <div class="content">
                <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                <span class="author">
                  <a href="#"><strong>Catouse</strong></a>
                  <span class="text-muted"> replied to </span>
                  <a href="#">Zhang Li</a>
                </span>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
              <div class="comments-list">
                <div class="comment">

                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                  <div class="comments-list">
                    <div class="comment">

                      <div class="content">
                        <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                        <span class="author">
                          <a href="#"><strong>Catouse</strong></a>
                          <span class="text-muted"> replied to </span>
                          <a href="#">Zhang Li</a>
                        </span>
                        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                        <div class="actions">
                          <a href="##">reply</a>
                          <a href="##">edit</a>
                          <a href="##">delete</a>
                        </div>
                      </div>
                      <div class="comments-list">
                        <div class="comment">

                          <div class="content">
                            <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                            <span class="author">
                              <a href="#"><strong>Catouse</strong></a>
                              <span class="text-muted"> replied to </span>
                              <a href="#">Zhang Li</a>
                            </span>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                            <div class="actions">
                              <a href="##">reply</a>
                              <a href="##">edit</a>
                              <a href="##">delete</a>
                            </div>
                          </div>
                        </div>
                        <div class="comment">

                          <div class="content">
                            <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                            <span class="author">
                              <a href="#"><strong>Catouse</strong></a>
                              <span class="text-muted"> replied to </span>
                              <a href="#">Zhang Li</a>
                            </span>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                            <div class="actions">
                              <a href="##">reply</a>
                              <a href="##">edit</a>
                              <a href="##">delete</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="comment">

                      <div class="content">
                        <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                        <span class="author">
                          <a href="#"><strong>Catouse</strong></a>
                          <span class="text-muted"> replied to </span>
                          <a href="#">Zhang Li</a>
                        </span>
                        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                        <div class="actions">
                          <a href="##">reply</a>
                          <a href="##">edit</a>
                          <a href="##">delete</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <div class="content">
                <div class="pull-right"><span class="text-muted">1 days ago</span> &nbsp;<strong>#2</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
              <div class="comments-list">
                <div class="comment">

                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                </div>
                <div class="comment">

                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <div class="content">
                <div class="pull-right"><span class="text-muted">2 months ago</span> &nbsp;<strong>#1</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
          </div>
          <footer>
            <div class="reply-form" id="commentReplyForm">
              <div class="form">
                <form role="form">
                  <div class="form-group">
                    <textarea class="form-control new-comment-text" rows="2" placeholder="write a comment..."></textarea>
                  </div>
                  <div class="form-group comment-user" style="display:none">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="pull-right">或者</span>
                        <a href="#">登录</a> &nbsp;<a href="##">注册</a>
                      </div>
                      <div class="col-md-7">
                        <div class="form-group">
                          <input type="text" class="form-control" id="nameInputEmail1" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                      </div>
                      <div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </section>
  </article>
</body>
</html>
